<template>
  <div class="month-details">
    <div class="month-details-top">
      <i @click="month_details_Back"></i>
      <h4>{{bill_month_title}}</h4>
      <p>{{bill_month_tips}}</p>
    </div>
    <!-- <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>-->
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <div class="month-details-mid">
        <div class="month-details-title">
          <h4 class="title-tips">币种账户</h4>
          <h4>账单总额</h4>
        </div>
        <div class="month-details-list" v-for="item in amount_currency" :key="item.name">
          <p class="list-p">{{item.name}}</p>
          <p class="account-total">{{item.amount}}</p>
        </div>
      </div>
      <div class="statement-list">
        <account-statement-item
          v-for="(item,index) in bill_month_details"
          :key="index"
          :account-item="item"
          :account-sym="no"
          @account-item-e="showDetails"
        ></account-statement-item>
      </div>
      <ui-empty :empty="{text:'暂无数据'}" v-if="list.length==0"></ui-empty>
    </ScrollList>
  </div>
</template>

<script>
import AccountStatementItem from "~/components/AccountStatementItem.vue";
import UiEmpty from "~/components/empty";
import ScrollList from "~/components/ScrollList";
import UILoading from "~/components/loading";

export default {
  components: {
    AccountStatementItem,
    ScrollList,
    UiEmpty,
    [UILoading.name]: UILoading
  },
  data: function() {
    return {
      no: "no",
      swiper: "",
      page: 1,
      total: 1,
      list: [],
      loading: false,
      config: {
        bottom: false,
        pull: false,
        end: false
      },
      initLoading: true,
      bill_month_tips_text: "",
      amountCurrency: []
    };
  },
  computed: {
    get_month_t() {
      return this.$store.state.wealthLeShellBill.bill_month_title;
    },
    bill_month_title() {
      let title = this.get_month_t;
      let arr = title.split("-");
      let str = arr[0] + "年" + arr[1] + "月份账单";
      return str;
    },
    bill_month_tips() {
      return (
        this.bill_month_tips_text ||
        this.$store.state.wealthLeShellBill.bill_month_tips
      );
    },
    bill_month_details() {
      if (this.list.length > 0) return this.list;
      return this.$store.state.wealthLeShellBill.bill_month_details.data.list;
    },
    amount_currency() {
      if (this.amountCurrency.length > 0) return this.amountCurrency;
      return this.$store.state.wealthLeShellBill.amount_currency;
    }
  },
  mounted() {
    let that = this;
    (async () => {
      // await this.get_bill();
    })();
    this.$nextTick(() => {
      this.$refs.scroll.$emit("pulling");
    });
  },
  methods: {
    async get_bill() {
      this.initLoading = true;
      let { data: rs } = await this.$axios.post("?ct=api&ac=my_bill", {
        month: this.get_month_t
      });
      if (rs.code == 0) {
        let guess_params = rs.data.guess_params;
        this.bill_month_tips_text = guess_params.text;
        this.amountCurrency = rs.data.list;

        // if (!Array.isArray(data) || data.length < 1) {
        //   this.$toast(rs.msg);
        //   return;
        // }

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async getPage(isRefresh) {
      if (this.loading || this.config.end) return false;
      this.loading = true;
      // this.get_bill();
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=monthly_bills", {
          month: this.get_month_t,
          page: this.page
        });
        // return;
        if (rs.code == 0) {
          const { data } = rs;
          // this.$store.commit("wealthLeShellBill/set_bill_month_details", rs);
          this.total = Number(data.total);

          if (isRefresh) {
            this.list = data.list;
          } else {
            this.list = this.list.concat(data.list);
          }
          if (this.total > this.list.length) {
            this.page++;
            this.config.end = false;
          } else {
            this.config.end = true;
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }

      this.loading = false;
    },
    async pull(cb) {
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      this.get_bill();
      this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },

    month_details_Back() {
      this.$router.go(-1);
    },
    showDetails(item) {
      //点击跳转流水详情
      this.$router.push({
        path: "bill/bill-details",
        query: { bill_id: item.bill_id }
      });
    }
  }
};
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 999;
  width: 100%;
}
.h428 {
  height: 428px;
}
.swiper-wrapper {
  display: flex;
  transform-style: preserve-3d;
}

.month-details {
  overflow: hidden;
  color: rgb(41, 41, 41);
}
.month-details-top {
  line-height: 1;
  height: 88px;
  font-family: "PingFangSC-Medium";
  font-size: 34px;
  background-color: #fff;
}
.month-details-top i {
  margin-left: 30px;
  margin-top: 25px;
  position: absolute;
  width: 21px;
  height: 38px;
  background: url("~assets/img/black_blue@2x.png") no-repeat;
  background-size: 21px 38px;
}
.month-details-top h4 {
  padding-top: 10px;
  text-align: center;
}
.month-details-top p {
  margin-top: 10px;
  text-align: center;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(211, 155, 0);
}

.month-details-mid {
  width: 690px;
  margin-top: 20px;
  margin-left: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #ccc, -2px -2px 4px #ccc, 2px -2px 4px #ccc,
    -2px 2px 4px #ccc;
  /* box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #ccc, 4px -4px 8px #ccc,
    -4px 4px 8px #ccc; */
}
.month-details-title {
  display: flex;
  margin-left: 30px;
  padding-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.month-details-title h4 {
}
.month-details-title h4.title-tips {
  width: 320px;
}
.month-details-list {
  display: flex;
  margin-left: 30px;
  margin-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(41, 41, 41);
}
.month-details-list:last-child {
  padding-bottom: 30px;
}
.month-details-list p {
}
.month-details-list .list-p {
  width: 320px;
}
.month-details-list .account-total {
  font-family: "SFUIDisplay-Medium";
}

.statement-list {
  margin-top: 20px;
}
</style>
